<script>
import { h, resolveComponent, toRef } from 'vue'
// import { ElButton } from 'element-plus'
// import CheckBoxGroup from '../component-list/basic/CheckBoxGroup.vue';
export default {
    // components: { CheckBoxGroup },
    props: {
        item: {
            type: Object,
            default: function () {
                return null
            }
        }
    },
    emits:['update:item'],
    setup(props) {
        // let item = toRef(props, 'item')
        // function setPropsValue(key, value = '') {
        //     item.value.attribute[key].value = value
        //     console.log('item', item.value)
        // }
        // return {
        //     setPropsValue
        // }
    },
    render() {
        let _this = this
        return h(
            _this.componenetName ? _this.componenetName : 'div',
            {
				item: _this.item,
                class: {
                    'layout-box': true
                },
                setPropsValue: _this.setPropsValue,
                'onUpdate:item': ($event) => {
                    // _this.item.attribute = $event.attribute
                }
                // item: _this.item,
                // value: Object.prototype.hasOwnProperty.call(_this.item.attribute, 'modelValue') ? _this.item.attribute.modelValue.value : Object.prototype.hasOwnProperty.call(_this.item.attribute, 'ArrayModelValue') ? _this.item.attribute.ArrayModelValue.value : _this.item.attribute.ObjectModelValue.value,
                // 'onUpdate:modelValue': ($event) => {
                //     Object.prototype.hasOwnProperty.call(_this.item.attribute, 'modelValue') ? (_this.item.attribute.modelValue.value = $event.value) : Object.prototype.hasOwnProperty.call(_this.item.attribute, 'ArrayModelValue') ? (_this.item.attribute.ArrayModelValue.value = $event.value) : (_this.item.attribute.ObjectModelValue.value = $event.value)
                // }
            },
            [this.$slots.default()]
        )
    },
    data() {
        return {
            componenetName: null,
            attr: {}
        }
    },
    watch: {
        // item: {
        //     handler(v) {
        //         this.$forceUpdate()
        //     },
        //     deep: true
        // }
    },
    methods: {
        setPropsValue(key, value = '') {
            this.$emit('changeItem', {key: key, value: value})
        }
    },
    created() {
    },
    mounted() {
        if (this.item.useMethod === '1') {
            // let temp = require('element-plus')
            // this.componenetName = temp[this.item.type]
            this.componenetName = require('../component-list/basic/' + this.item.fileName).default['zldemo']
        } else {
            this.componenetName = require('../component-list/basic/' + this.item.fileName).default
            // console.log('xxxxss', this.componenetName)
            // return
        }
        // for (let key in this.item.attribute) {
        //     if (this.item.attribute[key].replaceKey) {
        //         if (this.item.attribute[key].valueType === 'number') {
        //             this.attr[this.item.attribute[key].replaceKey] = Number(this.item.attribute[key].value)
        //         } else {
        //             this.attr[this.item.attribute[key].replaceKey] = this.item.attribute[key].value
        //         }
        //     }
        // }
        // 引用名称， 引用方式，括号或者非括号，UI库的需要，引用路径，属性
        // console.log('xxx', this.name)
    }
}
</script>
<style scoped lang="less">
.layout-box {
    width: 100%;
    box-sizing: border-box;
    // border: 1px solid rgba(60, 207, 255, 0.6);
}
</style>
